<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>万东影院 | 经理</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
</head>
<body>
<header>
  <ul class="nav nav-tabs m-2">
    <li class="nav-item">
      <a class="nav-link disabled">
        <i class="bi bi-person-circle"></i>
        <span class="ms-1">经理</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/manager/movies}">
        <i class="bi bi-film"></i>
        <span class="ms-1">电影列表</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active"
         th:href="@{/manager/screenings(byMovieId=${movie.getId()})}">
        <i class="bi bi-camera-reels"></i>
        <span class="ms-1">放映管理</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi bi-graph-up"></i>
        <span class="ms-1">销售数据</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/manager/log}">
        <i class="bi bi-journals"></i>
        <span class="ms-1">操作日志</span>
      </a>
    </li>
    <li class="nav-item ms-auto">
      <a class="nav-link" th:href="@{/me}">
        <i class="bi bi-person-gear"></i>
        <span class="ms-1">账号管理</span>
      </a>
    </li>
  </ul>
</header>
<main class="container-fluid">
  <div class="mt-3 ms-3">
    <div class="h4">电影《<span th:text="${movie.getTitle()}"></span>》的放映</div>
  </div>
  <form method="get" class="d-flex flex-wrap gap-3">
    <div class="border rounded-2 d-flex gap-3 p-1">
      <input type="hidden" id="movieIdInput" th:value="${movie.getId()}" name="byMovieId">
      <div class="px-2 d-flex justify-content-center align-items-center">搜索时间范围内的放映</div>
      <label for="startDateInput"
             class="d-flex justify-content-center align-items-center"
      >自</label>
      <input class="form-control w-auto" type="date" placeholder="设置开始日期"
             id="startDateInput" name="startDate" th:value="${startDate}">
      <label for="endDateInput"
             class="d-flex justify-content-center align-items-center"
      >到</label>
      <input class="form-control w-auto" type="date" placeholder="设置结束日期"
             id="endDateInput" name="endDate" th:value="${endDate}">
      <button type="submit" class="btn btn-primary">
        <i class="bi bi-search"></i>
        <span class="ms-1">搜索</span>
      </button>
    </div>
    <div class="border rounded-2 p-1">
      <a class="btn btn-primary" th:href="@{/manager/screenings/add(byMovieId=${movie.getId()})}">
        <i class="bi bi-plus-lg"></i>
        <span class="ms-1">添加放映</span>
      </a>
    </div>
  </form>
  <table class="table">
    <thead>
    <tr>
      <th>编号</th>
      <th>放映厅</th>
      <th>放映电影</th>
      <th>放映日期</th>
      <th>放映时间</th>
      <th>状态</th>
      <th>票价</th>
      <th>已售票</th>
      <th>已退票</th>
      <th
          style="width: 100px"
          class="text-center"
      >操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="screening : ${page.getContent()} ">
      <td th:text="${screening.getId()}"></td>
      <td th:text="${screening.getHall().getName()}"></td>
      <td th:text="${screening.getMovie().getTitle()}"></td>
      <td th:text="${screening.getStartTime().toLocalDate()}"></td>
      <td>
        <span th:text="${screening.getStartTime().toLocalTime()}"></span> -
        <span th:text="${screening.getEndTime().toLocalTime()}"></span>
      </td>
      <td th:text="${screening.getStatus().getDisplayName()}"></td>
      <td th:text="${screening.formatPrice()}"></td>
      <td>
        <span th:text="${screening.countOfSoldTickets()}"></span> /
        <span th:text="${screening.getHall().countOfSeats()}"></span>
      </td>
      <td th:text="${screening.countOfRefundedTickets()}"></td>
      <td class="text-center">
        <div class="dropdown">
          <button type="button" class="btn" data-bs-toggle="dropdown">
            <i class="bi bi-list"></i>
          </button>
          <ul class="dropdown-menu">
            <li><button class="btn dropdown-item px-3 py-2 delModalBtn"
                        data-bs-toggle="modal" data-bs-target="#delModal"
                        type="button" th:data-screening-id="${screening.getId()}">
              <i class="bi bi-trash"></i><span class="ms-3">删除</span>
            </button></li>
            <li th:if="${screening.isOnSchedule()}">
              <button class="btn dropdown-item px-3 py-2 openBtn"
                      th:data-screening-id="${screening.getId()}">
              <i class="bi bi-ticket-detailed"></i><span class="ms-3">开放售票</span>
            </button></li>
          </ul>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</main>
<footer>
  <div class="container-fluid clearfix">
    <div class="float-start">
      <span>共找到 <span th:text="${page.getTotalElements()}"></span> 场放映</span>
    </div>
    <div class="d-flex justify-content-center">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" th:if="${page.getNumber()} > 0"
             th:href="@{/manager/screenings(byMovieId=${movie.getId()},
             startDate=${startDate}, endDate=${endDate})}"
          >上一页</a>
          <a class="nav-link disabled" th:if="${page.getNumber()} == 0">上一页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">
            当前 <span th:text="${page.getNumber() + 1}"></span>页
            / 总共 <span th:text="${page.getTotalPages()}"></span> 页
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             th:if="${page.getNumber()} < ${page.getTotalPages() - 1}"
             th:href="@{/manager/screenings(byMovieId=${movie.getId()},
             startDate=${startDate}, endDate=${endDate})}"
          >下一页</a>
          <a class="nav-link disabled"
             th:unless="${page.getNumber()} < ${page.getTotalPages() - 1}">下一页</a>
        </li>
      </ul>
    </div>
    <input type="hidden" th:value="${page.getNumber() + 1}" id="currentPage">
  </div>
</footer>
<div class="modal" id="delModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">确认此操作</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="container">是否要删除该放映</div>
        <div class="alert alert-danger">
          <i class="bi bi-exclamation-triangle-fill"></i>
          <span class="ms-2">注意：此操作不可逆</span>
        </div>
      </div>
      <div class="modal-footer">
        <div class="btn btn-secondary me-2" data-bs-dismiss="modal">取消</div>
        <div class="btn btn-primary" data-screening-id=""
             data-bs-dismiss="modal" id="delBtn">确认</div>
      </div>
    </div>
  </div>
</div>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script>
const delBtn = document.getElementById("delBtn");

document.querySelectorAll(".delModalBtn").forEach(btn => {
  btn.addEventListener("click", () => {
    delBtn.dataset.screeningId = btn.dataset.screeningId;
  })
})

async function deleteScreening(screeningId) {
  try {
    const response = await axios.delete(`/api/screenings/${screeningId}`);
    console.log(response);
    alert("已删除放映");
    location.reload();
  } catch (error) {
    if (!error.response) {
      console.log(error);
    }
    else if(error.response.status === 409) {
      alert(error.response.data);
    } else {
      console.log(error);
    }
  }
}

delBtn.addEventListener("click", (event) => {
  event.preventDefault();
  const screeningId = delBtn.dataset.screeningId;
  deleteScreening(screeningId);
})

async function openForSale(screeningId) {
  try {
    const response = await axios.post(
        `/api/screenings/${screeningId}/open-for-sale`);
    console.log(response);
    alert("已开放售票");
    location.reload();
  } catch (error) {
    console.log(error);
  }
}

document.querySelectorAll(".openBtn").forEach(btn => {
  btn.addEventListener("click", (event) => {
    event.preventDefault();
    const screeningId = btn.dataset.screeningId;
    openForSale(screeningId);
  })
})

</script>
</body>
</html>